import Vue from "vue";
import Vuex from "vuex";

// vuex是vue的插件
// 安装插件
Vue.use(Vuex);

// Vuex数据特点和props一样，是只读，不能直接更新
// 想要更新要触发action或mutation函数

// 配置
const store = new Vuex.Store({
	// 配置对象
	// 集中管理状态的容器
	// vuex管理的所有数据都在state中
	state: {
		// 定义要接管的组件数据以及初始化值
		count: 0,
	},
	// 只读的计算属性数据
	getters: {
		oddOrEven(state) {
			return (state.count & 1) === 1 ? "奇数" : "偶数";
		},
	},
	// 包含n个用来间接更新数据的函数对象
	// 间接更新：发送请求
	actions: {
		// 开发中，如果更新vuex不需要异步操作，就不用action函数
		// increment(store, val) {
		// 	// 1. 往往发送请求，但是我们需求没有
		// 	// 2. 触发mutation函数
		// 	// store.commit('mutation函数名称')
		// 	store.commit("INCREMENT", val);
		// },
		// decrement({ commit }, val) {
		// 	// { commit }: 对函数的第一个参数解构，得到commit函数
		// 	commit("DECREMENT", val);
		// },
		// incrementIfOdd({ commit, state }, val) {
		// 	// 是奇数才能触发mutation函数
		// 	if ((state.count & 1) === 1) {
		// 		commit("INCREMENT", val);
		// 	}
		// },
		// 不建议使用this
		// incrementIfOdd() {
		// this就是store，就是action的第一个参数
		// 	if ((this.state.count & 1) === 1) {
		// 		this.commit("INCREMENT");
		// 	}
		// },
		incrementAsync({ commit }, val) {
			setTimeout(() => {
				commit("INCREMENT", val);
			}, 1000);
		},
	},
	// 包含n个用来直接更新数据的函数对象
	// 直接更新：对数据进行直接操作
	mutations: {
		INCREMENT(state, val) {
			// state就是vuex管理state数据
			state.count += val;
		},
		DECREMENT(state, val) {
			state.count -= val;
		},
		// 不会定义相同的函数，只保留一个函数即可
		// INCREMENT_IF_ODD(state) {
		// 	state.count += 1;
		// },
	},
});

export default store;
